// 导入 Google 字体
@import (css) url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

// 定义变量
@tt-toolbar-height: 44px;

body {
  // 使用变量
  --tt-toolbar-height: @tt-toolbar-height;
  --tt-theme-text: var(--tt-gray-light-900);

  // 暗色模式
  .dark & {
    --tt-theme-text: var(--tt-gray-dark-900);
  }
}

// 基础样式
body {
  font-family: "Inter", sans-serif;
  color: var(--tt-theme-text);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  padding: 0;
}

// 高度设置
html,
body,
#root,
#app {
  height: 100%;
  background-color: var(--tt-bg-color);
}

body {
  overflow: hidden;
}

// 编辑器字体
.tiptap.ProseMirror {
  font-family: "DM Sans", sans-serif;
}

// 内容区域样式
.content-wrapper {
  height: calc(100% - var(--tt-toolbar-height));
  overflow-y: auto;
  background-color: var(--tt-bg-color);

  // 滚动条样式
  &::-webkit-scrollbar {
    display: block;
    width: 0.5rem;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--tt-scrollbar-color);
    border-radius: 4px;
  }

  // Firefox 滚动条
  scrollbar-width: thin;
  scrollbar-color: var(--tt-scrollbar-color) transparent;
}

/* 浮动菜单 */
.bubble-menu {
  background-color: rgb(165, 173, 230);
  border: 1px solid rgb(79, 90, 176);
  border-radius: 0.7rem;
  box-shadow: var(--shadow);
  display: flex;
  padding: 0.2rem;

  button {
    background-color: unset;

    &:hover {
      background-color: var(--gray-3);
    }

    &.is-active {
      background-color: var(--purple);

      &:hover {
        background-color: var(--purple-contrast);
      }
    }
  }
}

// 简单编辑器内容区域
.simple-editor-content {
  // max-width: 640px;
  width: 700px;
  // min-width: 640px; 
  margin: 0 auto;
  background-color: var(--tt-bg-color);

  .tiptap.ProseMirror {
    padding: 3rem 3rem;
    background-color: var(--tt-bg-color);
    color: var(--tt-theme-text);
  }
}

// 响应式设计
@media screen and (max-width: 480px) {
  .simple-editor-content {
    .tiptap.ProseMirror {
      padding: 1rem 1.5rem;
    }
  }
}

/* Responsive toolbar button text truncation */
.tiptap-toolbar-group {
  .tiptap-button[data-text-trim="on"] {
    min-width: 60px;
    max-width: 120px;
    
    .tiptap-button-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .tiptap-button[data-text-trim="on"] {
      max-width: 80px;
    }
  }
  
  @media (max-width: 480px) {
    .tiptap-button[data-text-trim="on"] {
      max-width: 60px;
    }
  }
}

/* History panel button improvements */
.history-panel {
  .option-group {
    button[style*="backgroundColor"] {
      transition: all 0.2s ease;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }
}